/**
 * @class button - insert/edit image (open dialog window)
 *
 * @param  elRTE  rte   объект-редактор
 * @param  String name  название кнопки
 *
 * @author:    Dmitry Levashov (dio) dio@std42.ru
 * Copyright: Studio 42, http://www.std42.ru
 **/
(function ($) {
    elRTE.prototype.ui.prototype.buttons.image = function (rte, name) {
        this.constructor.prototype.constructor.call(this, rte, name);
        var self = this,
            rte = self.rte,
            proportion = 0,
            width = 0,
            height = 0,
            bookmarks = null,
            reset = function (nosrc) {
                $.each(self.src, function (i, elements) {
                    $.each(elements, function (n, el) {
                        if (n == 'src' && nosrc) {
                            return;
                        }
                        el.val('');
                    });
                });
            },
            values = function (img) {
                $.each(self.src, function (i, elements) {
                    $.each(elements, function (n, el) {
                        var val, w, c, s, border;

                        if (n == 'width') {
                            val = img.width();
                        } else if (n == 'height') {
                            val = img.height();
                        } else if (n == 'border') {
                            val = '';
                            border = img.css('border') || rte.utils.parseStyle(img.attr('style')).border || '';

                            if (border) {
                                w = border.match(/(\d(px|em|%))/);
                                c = border.match(/(#[a-z0-9]+)/);
                                val = {
                                    width:w ? w[1] : border,
                                    style:border,
                                    color:rte.utils.color2Hex(c ? c[1] : border)
                                }
                            }
                        } else if (n == 'margin') {
                            val = img;
                        } else if (n == 'align') {
                            val = img.css('float');

                            if (val != 'left' && val != 'right') {
                                val = img.css('vertical-align');
                            }
                        } else {
                            val = img.attr(n) || '';
                        }

                        if (i == 'events') {
                            val = rte.utils.trimEventCallback(val);
                        }

                        el.val(val);
                    });
                });
            },
            preview = function () {
                var src = self.src.main.src.val();

                reset(true);

                if (!src) {
                    self.preview.children('img').remove();
                    self.prevImg = null;
                } else {
                    if (self.prevImg) {
                        self.prevImg
                            .removeAttr('src')
                            .removeAttr('style')
                            .removeAttr('class')
                            .removeAttr('id')
                            .removeAttr('title')
                            .removeAttr('alt')
                            .removeAttr('longdesc');

                        $.each(self.src.events, function (name, input) {
                            self.prevImg.removeAttr(name);
                        });
                    } else {
                        self.prevImg = $('<img/>').prependTo(self.preview);
                    }
                    self.prevImg.load(function () {
                        self.prevImg.unbind('load');
                        setTimeout(function () {
                            width = self.prevImg.width();
                            height = self.prevImg.height();
                            proportion = (width / height).toFixed(2);
                            self.src.main.width.val(width);
                            self.src.main.height.val(height);

                        }, 100);
                    })
                        .attr('src', src);
                }

            },
            size = function (e) {
                var w = parseInt(self.src.main.width.val()) || 0,
                    h = parseInt(self.src.main.height.val()) || 0;

                if (self.prevImg) {
                    if (w && h) {
                        if (e.target === self.src.main.width[0]) {
                            h = parseInt(w / proportion);
                        } else {
                            w = parseInt(h * proportion);
                        }
                    } else {
                        w = width;
                        h = height;
                    }
                    self.src.main.height.val(h);
                    self.src.main.width.val(w);
                    self.prevImg.width(w).height(h);
                    self.src.adv.style.val(self.prevImg.attr('style'));
                }
            }
            ;

        this.img = null;
        this.prevImg = null;
        this.preview = $('<div class="elrte-image-preview"/>').text('Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin');

        this.init = function () {
            this.labels = {
                main:'Properies',
                link:'Link',
                adv:'Advanced',
                events:'Events',
                id:'ID',
                'class':'Css class',
                style:'Css style',
                longdesc:'Detail description URL',
                href:'URL',
                target:'Open in',
                title:'Title'
            }

            this.src = {
                main:{
                    src:$('<input type="text" />').css('width', '100%').change(preview),
                    title:$('<input type="text" />').css('width', '100%'),
                    alt:$('<input type="text" />').css('width', '100%'),
                    width:$('<input type="text" />').attr('size', 5).css('text-align', 'right').change(size),
                    height:$('<input type="text" />').attr('size', 5).css('text-align', 'right').change(size),
                    margin:$('<div />').elPaddingInput({
                        type:'margin',
                        change:function () {
                            var margin = self.src.main.margin.val();

                            if (self.prevImg) {
                                if (margin.css) {
                                    self.prevImg.css('margin', margin.css)
                                } else {
                                    self.prevImg.css({
                                        'margin-left':margin.left,
                                        'margin-top':margin.top,
                                        'margin-right':margin.right,
                                        'margin-bottom':margin.bottom
                                    });
                                }
                            }
                        }
                    }),
                    align:$('<select />').css('width', '100%')
                        .append($('<option />').val('').text(this.rte.i18n('Not set', 'dialogs')))
                        .append($('<option />').val('left').text(this.rte.i18n('Left')))
                        .append($('<option />').val('right').text(this.rte.i18n('Right')))
                        .append($('<option />').val('top').text(this.rte.i18n('Top')))
                        .append($('<option />').val('text-top').text(this.rte.i18n('Text top')))
                        .append($('<option />').val('middle').text(this.rte.i18n('middle')))
                        .append($('<option />').val('baseline').text(this.rte.i18n('Baseline')))
                        .append($('<option />').val('bottom').text(this.rte.i18n('Bottom')))
                        .append($('<option />').val('text-bottom').text(this.rte.i18n('Text bottom')))
                        .change(function () {
                            var val = $(this).val(),
                                css = {
                                    'float':'',
                                    'vertical-align':''
                                };
                            if (self.prevImg) {
                                if (val == 'left' || val == 'right') {
                                    css['float'] = val;
                                    css['vertical-align'] = '';
                                } else if (val) {
                                    css['float'] = '';
                                    css['vertical-align'] = val;
                                }
                                self.prevImg.css(css);
                            }
                        }),
                    border:$('<div />').elBorderSelect({
                        name:'border',
                        change:function () {
                            var border = self.src.main.border.val();
                            if (self.prevImg) {
                                self.prevImg.css('border', border.width ? border.width + ' ' + border.style + ' ' + border.color : '');
                            }
                        }
                    })
                },

                adv:{},
                events:{}
            }

            $.each(['id', 'class', 'style', 'longdesc'], function (i, name) {
                self.src.adv[name] = $('<input type="text" style="width:100%" />');
            });

            this.src.adv['class'].change(function () {
                if (self.prevImg) {
                    self.prevImg.attr('class', $(this).val());
                }
            });

            this.src.adv.style.change(function () {
                if (self.prevImg) {
                    self.prevImg.attr('style', $(this).val());
                    values(self.prevImg);
                }
            });

            $.each(
                ['onblur', 'onfocus', 'onclick', 'ondblclick', 'onmousedown', 'onmouseup', 'onmouseover', 'onmouseout', 'onmouseleave', 'onkeydown', 'onkeypress', 'onkeyup'],
                function () {
                    self.src.events[this] = $('<input type="text"  style="width:100%"/>');
                });
        }

        this.command = function () {
            !this.src && this.init();

            var img,
                opts = {
                    rtl:rte.rtl,
                    submit:function (e, d) {
                        e.stopPropagation();
                        e.preventDefault();
                        self.set();

                        dialog.close();
                    },
                    close:function () {

                        bookmarks && rte.selection.moveToBookmark(bookmarks)
                    },
                    dialog:{
                        autoOpen:false,
                        width:500,
                        position:'top',
                        title:rte.i18n('Image'),
                        resizable:true,
                        open:function () {
                            $.fn.resizable && $(this).parents('.ui-dialog:first').resizable('option', 'alsoResize', '.elrte-image-preview');
                        }
                    }
                },
                dialog = new elDialogForm(opts),
                fm = !!rte.options.fmOpen,
                src = fm
                    ? $('<div class="elrte-image-src-fm"><span class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-folder-open"/></span></div>')
                    .append(this.src.main.src.css('width', '87%'))
                    : this.src.main.src;

            ;

            reset();
            this.preview.children('img').remove();
            this.prevImg = null;
            img = rte.selection.getEnd();

            this.img = img.nodeName == 'IMG' && !$(img).is('.elrte-protected')
                ? $(img)
                : $('<img/>');

            bookmarks = rte.selection.getBookmark();

            if (fm) {
                src.children('.ui-state-default')
                    .click(function () {
                        rte.options.fmOpen(function (url) {
                            self.src.main.src.val(url).change()
                        });
                    })
                    .hover(function () {
                        $(this).toggleClass('ui-state-hover');
                    });
            }

            dialog.tab('main', this.rte.i18n('Properies'))
                .append([this.rte.i18n('Image URL'), src], 'main', true)
                .append([this.rte.i18n('Title'), this.src.main.title], 'main', true)
                .append([this.rte.i18n('Alt text'), this.src.main.alt], 'main', true)
                .append([this.rte.i18n('Size'), $('<span />').append(this.src.main.width).append(' x ').append(this.src.main.height).append(' px')], 'main', true)
                .append([this.rte.i18n('Alignment'), this.src.main.align], 'main', true)
                .append([this.rte.i18n('Margins'), this.src.main.margin], 'main', true)
                .append([this.rte.i18n('Border'), this.src.main.border], 'main', true)

            dialog.append($('<fieldset><legend>' + this.rte.i18n('Preview') + '</legend></fieldset>').append(this.preview), 'main');


            $.each(this.src, function (tabname, elements) {

                if (tabname == 'main') {
                    return;
                }
                dialog.tab(tabname, rte.i18n(self.labels[tabname]));

                $.each(elements, function (name, el) {
                    self.src[tabname][name].val(tabname == 'events' ? rte.utils.trimEventCallback(self.img.attr(name)) : self.img.attr(name) || '');
                    dialog.append([rte.i18n(self.labels[name] || name), self.src[tabname][name]], tabname, true);
                });
            });

            dialog.open();

            if (this.img.attr('src')) {
                values(this.img);
                this.prevImg = this.img.clone().prependTo(this.preview);
                proportion = (this.img.width() / this.img.height()).toFixed(2);
                width = parseInt(this.img.width());
                height = parseInt(this.img.height());
            }
        }

        this.set = function () {
            var src = this.src.main.src.val(),
                link;

            this.rte.history.add();
            bookmarks && rte.selection.moveToBookmark(bookmarks);

            if (!src) {
                link = rte.dom.selfOrParentLink(this.img[0]);
                link && link.remove();
                return this.img.remove();
            }

            !this.img[0].parentNode && (this.img = $(this.rte.doc.createElement('img')));

            this.img.attr('src', src)
                .attr('style', this.src.adv.style.val());

            $.each(this.src, function (i, elements) {
                $.each(elements, function (name, el) {
                    var val = el.val(), style;

                    switch (name) {
                        case 'width':
                            self.img.css('width', val);
                            break;
                        case 'height':
                            self.img.css('height', val);
                            break;
                        case 'align':
                            self.img.css(val == 'left' || val == 'right' ? 'float' : 'vertical-align', val);
                            break;
                        case 'margin':
                            if (val.css) {
                                self.img.css('margin', val.css);
                            } else {
                                self.img.css({
                                    'margin-left':val.left,
                                    'margin-top':val.top,
                                    'margin-right':val.right,
                                    'margin-bottom':val.bottom
                                });
                            }
                            break;
                        case 'border':
                            if (!val.width) {
                                val = '';
                            } else {
                                val = 'border:' + val.css + ';' + $.trim((self.img.attr('style') || '').replace(/border\-[^;]+;?/ig, ''));
                                name = 'style';
                                self.img.attr('style', val)
                                return;
                            }

                            break;
                        case 'src':
                        case 'style':
                            return;
                        default:
                            val ? self.img.attr(name, val) : self.img.removeAttr(name);
                    }
                });
            });

            !this.img[0].parentNode && rte.selection.insertNode(this.img[0]);
            this.rte.ui.update();
        }

        this.update = function () {
            this.domElem.removeClass('disabled');
            var n = this.rte.selection.getEnd(),
                $n = $(n);
            if (n.nodeName == 'IMG' && !$n.hasClass('elrte-protected')) {
                this.domElem.addClass('active');
            } else {
                this.domElem.removeClass('active');
            }
        }

    }
})(jQuery);
